The document provides an introduction to ReactJS, including:
- ReactJS is a JavaScript library developed by Facebook for building user interfaces.
- It uses virtual DOM for rendering UI components efficiently. Only updated components are re-rendered.
- Components are the basic building blocks of React apps. They accept input and return React elements to describe what should appear on the screen.
- The main steps to set up a React app are installing React and ReactDOM libraries, adding JSX syntax, and rendering components onto the DOM using ReactDOM.render().
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
ReactJS is arguably the most popular Javascript framework around for web development today. With more and more teams exploring and adopting React, here is TechTalks presentation elaborating fundamentals of React, in a code along session
React JS is a JavaScript library for building user interfaces. It uses a virtual DOM to efficiently update the real DOM and render user interfaces from components. Components are reusable pieces of UI that accept input data via properties but maintain private state data. The lifecycle of a component involves initialization, updating due to state/prop changes, and unmounting. React uses a single-directional data flow and the concept of components makes code modular and reusable.
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
ReactJS for Beginners provides an overview of ReactJS including what it is, advantages, disadvantages, typical setup tools, and examples of basic React code. Key points covered include:
- ReactJS is a JavaScript library for building user interfaces and is component-based.
- Advantages include high efficiency, easier JavaScript via JSX, good developer tools and SEO, and easy testing.
- Disadvantages include React only handling the view layer and requiring other libraries for full MVC functionality.
- Examples demonstrate basic components, properties, events, conditional rendering, and lists in ReactJS.
The session will provide the knowledge about react page life cycle and how more precise actions or operations can be performed using react hooks concepts
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
React is a JavaScript library created by Facebook and Instagram to build user interfaces. It allows developers to create fast user interfaces easily through components. React uses a virtual DOM to update the real DOM efficiently. Some major companies that use React include Facebook, Yahoo!, Airbnb, and Instagram. React is not a complete framework but rather just handles the view layer. It uses a one-way data binding model and components to build user interfaces.
Introduction to React JS for beginners | Namespace ITnamespaceit
React is a JavaScript library for building user interfaces using reusable components. It is used to create single page applications that dynamically update the current page with new data from the server. React uses a component-based approach and one-way data binding to build interfaces simply and allow for easy testing. Key concepts in React include components, props, state, lifecycles, hooks, JSX, and the virtual DOM. Major companies using React include Facebook, Netflix, Instagram, and WhatsApp.
This document contains an agenda and slides for a React workshop presented by Bojan Golubovic. The workshop covers the history and basics of React, including components, JSX, the virtual DOM, and React data flow. It also discusses related tools like Redux and React Router. The goal is to provide basic knowledge of React and how to build real-world applications with it.
React is a library for building user interfaces using components. It uses a virtual DOM for rendering components, which are pieces of UI defined as classes or functions. Components receive data via props and local state, and can be nested to build complex UIs. The component lifecycle includes mounting, updating, and unmounting phases. Data flows unidirectionally down the component tree. React has a vibrant ecosystem and community for continued learning.
This document provides an introduction to React.js, including:
- React is a JavaScript library for building user interfaces and was developed by Facebook. It is the VIEW component in MVC architecture.
- Key features and benefits of React include being fast, modular, scalable, flexible, and popular due to its employability. Large companies like Facebook use React.
- Core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM which improves performance compared to traditional frameworks. Components are reusable pieces that make up the entire application.
This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.
- React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes.
- Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements.
- Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes.
- The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.
In this presentation, Prashant Sharma of Valuebound has talked about ReactJS - a JavaScript library for building user interfaces. Check out the agendas to know what is there for you.
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8
This document provides an introduction to React.js, including:
- React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change.
- The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way.
- Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.
This document introduces React, describing it as a JavaScript library for building user interfaces by rendering components rather than mutating the DOM directly. It discusses how React uses a virtual DOM for fast re-rendering, building components instead of templates, and the use of JSX syntax to write HTML-like code. Components have state and props, and the whole app re-renders when state changes to guarantee updates.
Microsoft Typescript is a statically typed compiled language to clean and a simple plain old JavaScript code which runs on any browser, in Node.js or in any JavaScript engine that supports ECMAScript 3 (or newer).
This document provides an overview of React, including initial reactions to it, fundamental concepts like components and one-way data flow, and how the virtual DOM works. Some key points covered include:
- Initial reactions to React were mixed, with some finding it "ugly" but others seeing benefits like separation of concerns with components.
- Everything in React is a component, with data flowing in one direction from parent to child via props. State is mutable within a component.
- By using a virtual DOM, React can efficiently update the real DOM by only making necessary changes, keeping the interface fast and pure.
One Does Not… write TypeScript so easily! In this Meetup talk, I'll share the tricks and pain points I had to learn in my first 6 months of professional TypeScript. The goal is to spare the reader many hours of Stack Overflow...
This is the first half of a presentation I gave at Squares Conference 2015 where I provided a brief introduction to React JS, then did live coding for 20 minutes to show more of the specifics of usage. Your milage may vary as the live code part was where the bulk of the teaching happened!
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
This document discusses TypeScript, a superset of JavaScript that adds optional static typing and class-based object-oriented programming. It allows developers to gradually introduce typing into JavaScript code for improved productivity and catch errors early. The document covers TypeScript features like interfaces, classes, modules, type definitions, and comparisons to alternatives like CoffeeScript and Dart. It concludes that TypeScript allows gradual adoption of typing while following the future ECMAScript standard.
This document provides an introduction to React, a JavaScript library for building user interfaces. It discusses React's fundamentals like components and unidirectional data flow. It also covers topics like JSX, props, state, lifecycles, and demos creating a component. The document aims to explain what React is, its core concepts, and how to get started using it to build user interfaces.
Este documento presenta un taller sobre React y Redux. Se divide en 4 cursos que cubren los conceptos básicos de React como componentes y estado, la arquitectura de Redux, y ejemplos prácticos de construcción de aplicaciones con estas tecnologías. El instructor tiene experiencia desarrollando aplicaciones frontend y compartirá su conocimiento a través de explicaciones y ejercicios prácticos de código.
This document provides an introduction and overview of ReactJS concepts including components, JSX, props, state, lifecycle methods and the virtual DOM. It compares ReactJS to AngularJS, noting ReactJS uses a non-MVC architecture and focuses on just the view layer while AngularJS follows MVC. Later sections discuss additional ReactJS topics like Flux, Redux, Webpack and RamdaJS.
The document discusses various React performance optimization techniques including composition, conditional rendering, inline handlers, and constant components. It provides examples of refactoring components to separate concerns and prevent unnecessary re-renders through techniques like lifting state, extracting child components, and using constant properties.
The document provides biographical information about Mitch Chen, an expert in front-end engineering with 8 years of experience. It notes that he is a JavaScript expert and React/Flux enthusiast who has worked as a senior frontend manager and software engineer at several companies. The document also lists Mitch Chen's blog and Facebook group on React and provides a brief introduction to React, highlighting how it renders user interfaces, is battle-tested on large sites, uses components instead of templates, and employs a virtual DOM.
React is a JavaScript library for building user interfaces developed by Facebook. It uses a component-based approach to build modular and reusable UI components that manage their own state. Components receive data and callbacks through properties and local state is updated through setState(). The virtual DOM provides efficient re-rendering when state changes by comparing the new representation with the previous one. Everything in React is a component, components receive and manage data through properties and local state, and the declarative nature simplifies complexity.
This document discusses TypeScript, Dart, and CoffeeScript as alternatives to JavaScript for large scale development. It presents demos of TypeScript's type system, classes, interfaces, and modules. The final section demonstrates a TypeScript "Hello World" app running on Node.js and Azure with features like IntelliSense, debugging, and profiling.
On May 14, 2015, Jeff Winkler gave a talk at Harvard University's Lamont Library titled "Intro to ReactJS."
Description
Created by Facebook and Instagram, React has recently been embraced by companies and organizations including Airbnb, Khan Academy, Reddit, the BBC, and Code Academy. This presentation will be especially interesting for those using or planning to use javascript libraries such as angularJS, backbone.js, ember.js, and others.
For this talk, Jeff Winkler will present:
- An introduction to React, mixed with demos.
- An examination of how React implements Computer Science principles from Functional and Object-Oriented. The discussion will consider the impact on maintainable large-scale systems.
Biography
Jeff Winkler, is a professional developer* in the Boston area and organizer of the Boston ReactJS Meetup. In addition to the ReactJS Boston Meetup, Jeff works with React professionally at TapJoy and runs http://react.rocks.
(* Full-stack guy. ReactJS, Rails, TDD. Best OODA loop wins)
How to solve daily, chronic problems in your business with concepts from Poly...Redbox Studio
This presentation on problem–solving will give you an idea of the powerful and graspable techniques that you can use effectively to solve a great many of your current problems.
Mr Jay Menon was invited to speak to a group of business owners and senior managers at an event called Marketing Mojo Meetup organized by Redbox Studio.
This document provides an introduction and overview of React, including:
- What React is and who is using it
- The core concepts of React including components, one-way data flow, and the virtual DOM
- Why React is popular due to its cross-platform capabilities, performance advantages of the virtual DOM, and being maintained by Facebook
- How to get started with React using create-react-app and building a basic component
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses virtual DOM which improves performance and can render on both client and server. React encourages a component-based approach where UI is broken into independent reusable pieces that accept external data through properties. Components manage their own state which allows the UI to update over time in response to user input. This makes React code more predictable and easier to debug than traditional two-way data binding.
The document discusses React, a JavaScript library for building user interfaces. It begins by explaining what React is, its core principles of being declarative, efficient and flexible. It then covers React basics like using JSX syntax, maintaining a virtual DOM, one-way data flow and building reusable components. The document also provides examples of adding state and properties to components. Finally, it discusses thinking in React and walks through building a searchable product table as an example.
1) Single page applications (SPAs) use JavaScript to dynamically update the content of a single web page rather than loading entire new pages. This reduces page refreshes.
2) React is a popular JavaScript library for building user interfaces, especially for SPAs. It uses a virtual DOM for faster rendering.
3) Create-React-App is a command line interface that sets up a React project with common dependencies like Babel and Webpack preconfigured.
This document provides an overview of React Native, Redux, and ES6 concepts. It begins with an introduction to React Native fundamentals like components, props vs state, and styling. It then covers Redux terminology such as actions, reducers, and middleware. Finally, it discusses ES6 features like arrow functions, destructuring, and template literals. Code examples and links to documentation are provided throughout for illustrating key concepts.
React Best Practices All Developers Should Follow in 2024.pdfBOSC Tech Labs
Stay ahead with these crucial React best practices for 2024. Learn how to optimize your React applications for performance, maintainability, and scalability.
Learn how to easily install Webpack in Reactjs with this comprehensive step-by-step guide. Make sure your Reactjs app is optimized with Webpack for maximum performance!
React is a JavaScript library for building user interfaces that allows developers to create reusable UI components. It uses a virtual DOM for efficient re-rendering when data changes, and can render components on both the client-side and server-side. Key aspects of React include JSX syntax that resembles HTML, the component model for building encapsulated components, and tools like NPM, Webpack and Babel that help support React projects.
This document provides an overview and introduction to React, a JavaScript library for building user interfaces. It discusses why React is used, how to set up a React environment, core React concepts like components, props, state, lifecycles and events. It also introduces React Native for building native mobile apps with React. The document emphasizes learning React through hands-on examples and practice.
React.js is a JavaScript library developed by awesome engineers at Facebook. React is really fast, any app developed in React can handle complex updates and still feel quick and responsive. It uses reusable components, it’s modularity makes it really easy to maintain JavaScript (spaghetti code). React performs best with large programs that constantly require data changes, and this is a very famous language, understanding. React will definitely make you more employable.
Prerequisite to understanding React.js is JavaScript fundamentals,
ReactJS is a popular JavaScript library for building user interfaces. It allows developers to create reusable UI components and was developed by Facebook. Some major companies that use React include Instagram, Netflix, Yahoo Mail, and WhatsApp. React can be installed on Ubuntu and Windows systems. Key features of React include components, props, state, and JSX syntax which allows HTML-like markup to be written in JavaScript.
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
The Best Guide to Know What, Why, When to Use Is ReactJSWeblineIndia
We have prepared this guide for people who are starting with React. Read the complete post to know what, why, when to use ReactJS. Read more https://www.weblineindia.com/blog/everything-you-should-know-about-reactjs/
This document provides an overview and introduction to React.js, including:
- React uses components and states, with components being reusable parts of the interface and states allowing components to re-render when data changes.
- JSX allows embedding XML-like syntax in JavaScript and makes code more readable.
- Props are used to pass data between parent and child components, while state stores internal data of a component that may change.
- The document provides examples of building a simple component to track saves or favorites of a home listing as state, and discusses organizing data flow through components.
React Native allows developers to build native mobile apps using JavaScript and React. While it provides benefits like using React for both web and mobile, allowing for code reuse, there are also challenges to using it in production. It is easy for web developers to use initially but documentation is poor and updates can cause breaking changes. Performance has not been an issue yet but native apps are generally faster. While the community is active, third party packages can introduce bugs and the build can sometimes break, especially on Android. Overall, React Native can be used for production apps if challenges around updates and crashes are addressed.
With these slides you will learn how to build your first functional component and how to get started with React using Webpack and Babel. We will also discover the JSX syntax and by the end of the the slides you will be able to render your first site using React components.
This document discusses how to integrate ReactJS with a Django application. It begins by outlining the benefits of React like its efficiency and responsiveness. It then addresses using React alongside Django templates and introduces React concepts like components, properties, and states. It provides instructions on setting up tools like Node, Webpack, Babel and installing React. It demonstrates how to create React components and render them in Django templates. Finally, it discusses advanced React topics and offers conclusions on the power of combining React and Django.
Literature Reivew of Student Center DesignPriyankaKarn3
It was back in 2020, during the COVID-19 lockdown Period when we were introduced to an Online learning system and had to carry out our Design studio work. The students of the Institute of Engineering, Purwanchal Campus, Dharan did the literature study and research. The team was of Prakash Roka Magar, Priyanka Karn (me), Riwaz Upreti, Sandip Seth, and Ujjwal Dev from the Department of Architecture. It was just a scratch draft made out of the initial phase of study just after the topic was introduced. It was one of the best teams I had worked with, shared lots of memories, and learned a lot.
How to Manage Internal Notes in Odoo 17 POSCeline George
In this slide, we'll explore how to leverage internal notes within Odoo 17 POS to enhance communication and streamline operations. Internal notes provide a platform for staff to exchange crucial information regarding orders, customers, or specific tasks, all while remaining invisible to the customer. This fosters improved collaboration and ensures everyone on the team is on the same page.
Enhancing Security with Multi-Factor Authentication in Privileged Access Mana...Bert Blevins
In the constantly evolving field of cybersecurity, ensuring robust protection for sensitive data and critical systems has never been more vital. As cyber threats grow more sophisticated, organizations continually seek innovative ways to bolster their defenses. One of the most effective tools in the security arsenal is Multi-Factor Authentication (MFA), particularly when integrated with Privileged Access Management (PAM).
Privileged Access Management encompasses the methods, procedures, and tools used to regulate and monitor access to privileged accounts within an organization. Users with privileged accounts possess elevated rights, enabling them to perform essential operations such as system configuration, access to sensitive data, and management of network infrastructure. However, these elevated privileges also pose a significant security risk if they fall into the wrong hands.
By combining MFA with PAM, organizations can significantly enhance their security posture. MFA adds an additional layer of verification, ensuring that even if privileged account credentials are compromised, unauthorized access can be thwarted. This integration of MFA and PAM provides a robust defense mechanism, protecting critical systems and sensitive data from increasingly sophisticated cyber threats.
OCS Training Institute is pleased to co-operate with
a Global provider of Rig Inspection/Audits,
Commission-ing, Compliance & Acceptance as well as
& Engineering for Offshore Drilling Rigs, to deliver
Drilling Rig Inspec-tion Workshops (RIW) which
teaches the inspection & maintenance procedures
required to ensure equipment integrity. Candidates
learn to implement the relevant standards &
understand industry requirements so that they can
verify the condition of a rig’s equipment & improve
safety, thus reducing the number of accidents and
protecting the asset.
Best Practices for Password Rotation and Tools to Streamline the ProcessBert Blevins
Securing sensitive data is crucial for both individuals and enterprises in the digital era. Password rotation, or regularly changing passwords, has long been a standard security practice. Despite some debate over its effectiveness, password rotation remains an important part of comprehensive security strategies. This guide will explore best practices for password rotation and highlight tools to streamline the process.
The history of rotating passwords dates back to early computer security guidelines, which aimed to reduce the time attackers could exploit stolen credentials by frequently changing passwords. This practice helps mitigate risks associated with credential stuffing, password reuse, and prolonged exposure of compromised passwords. By regularly changing passwords, the time a compromised password can be used is limited, old passwords exposed in breaches are rendered invalid, and regulatory compliance is maintained. Furthermore, frequent changes encourage security awareness among users, reminding them to stay vigilant against phishing and other threats.
To streamline the process of password rotation, various tools and techniques can be employed. Automated password management solutions can schedule and enforce password changes, ensuring compliance with security policies. Additionally, password managers can securely store and generate complex passwords, making it easier for users to adhere to rotation practices without compromising convenience. Implementing multi-factor authentication (MFA) alongside password rotation can further enhance security by adding an extra layer of protection against unauthorized access. By adopting these best practices and utilizing appropriate tools, organizations and individuals can effectively strengthen their cybersecurity posture and safeguard sensitive information.
A brand new catalog for the 2024 edition of IWISS. We have enriched our product range and have more innovations in electrician tools, plumbing tools, wire rope tools and banding tools. Let's explore together!
Response & Safe AI at Summer School of AI at IIITHIIIT Hyderabad
Talk covering Guardrails , Jailbreak, What is an alignment problem? RLHF, EU AI Act, Machine & Graph unlearning, Bias, Inconsistency, Probing, Interpretability, Bias
4. Welcome to React.js
React.js is a JavaScript library developed by Facebook engineers.
Here are just a few of the reasons why people choose to program with React
Fast
Apps made in React can handle
complex updates and still feel quick
and responsive
Modular
Instead of writing large, dense files of
code, you can write many smaller,
reusable files. React's modularity can be
a beautiful solution to JavaScript's
maintainability problems
Scalable
Large programs that display a lot
of changing data are where
React performs best
Flexible
You can use React for interesting
projects that have nothing to do
with making a web app
Popular
While this reason has admittedly
little to do with React's quality,
the truth is that understanding
React will make you more
employable
9. INSTALLING REACT [SPA]
Create React App is the best way to starting building a new React single page application. It sets up your
development environment so that you can use the latest JavaScript features, provides a nice developer
experience, and optimizes your app for production.
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so
you can use it with any backend you want. It uses webpack, Babel and ESLint under the hood, but
configures them for you.
10. INSTALLING REACT [AREA]
You don't need to rewrite your app to start using React.
We recommend adding React to a small part of your application, such an individual widget, so you can see
if it works well for your use case.
While React can be used without a build pipeline, we recommend setting it up so you can be more
productive. A modern build pipeline typically consists of :
A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party
packages, and easily install or update them.
A bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into
small packages to optimize load time.
A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.
11. INSTALLING REACT [AREA]
//To install React with Yarn, run // To install React with npm, run:
Both Yarn and npm download packages from the npm registry.
Enabling ES6 and JSX
We recommend using React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set
of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript
language that works nicely with React.
yarn init
yarn add react react-dom
npm init
npm install -- save react react-dom
12. Development and Production Versions
By default, React includes many helpful warnings. These warnings are very useful in
development. However, they make React larger and slower so you should make sure to use
the production version when you deploy the app.
Create React App : If you use Create React App, npm run build will create an optimized
build of your app in the build folder.
Webpack : Include both DefinePlugin and UglifyJsPlugin into your production Webpack
configuration as described in this guide.
Browserify : Run Browserify with NODE_ENV environment variable set to production and
use UglifyJS as the last build step so that development-only code gets stripped out.
13. INSTALLING REACT [CDN]
Using a CDN
If you don't want to use npm to manage client packages :
Minified and optimized production versions of React are available at:
To load a specific version of react and react-dom, replace 15 with the version number.
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
15. JSX
JSX is a syntax extension for JavaScript code looks a lot like HTML (not valid JavaScript
web browsers can't read it), It was written to be used with React.
If a JavaScript file contains JSX code, then that file will have to be compiled. That means that
before the file reaches a web browser, a JSX compiler will translate any JSX into regular
JavaScript.
http://magic.reactjs.net/htmltojsx.htm
16. JSX
You can use the JSX directly with the Babel JavaScript library in the Development mode
just for test and not in production !
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
17. JSX vs JS ?
var jsVar = ‘<h1>Hello world</h1>’ //JS VARIABLE
var jsxVar = <h1>Hello world</h1> //JSX ELEMENTS
var product = <img src="images/product-id.jpg" alt=‘product-name" width="500px" height="500px" />
ATTRIBUTES IN JSX
18. Use JSX or JS ?
In React, it's possible to write your component in pure JS like:
But I think it's not very comfortable to write your HTML in this way. Luckily we can
write it in a JSX syntax (JavaScript extension) which let us write HTML inline:
render () { return <div>Hello {this.props.name}</div>; }
render () {
return React.createElement("div", null, "Hello ", this.props.name); }
19. Nested
If a JSX expression takes up more than one line, then you should wrap the multi-line
JSX expression in parentheses. This looks strange at first, but you get used to it:
Nested JSX expressions can be saved as variables, passed to functions, etc., just like non-
nested JSX expressions can!
var theGoogleLink =
(
<a href="https://www.google.com">
<h1> Click me I am Google </h1>
</a>
);
20. Nested
Best practices :
To make this more readable, you can use HTML-style line breaks and indentation :
<a href="https://www.google.net"><h1>Click me I am Google</h1></a>
<a href="https://www.google.net">
<h1>Click me I am Google</h1>
</a>
21. Nested
There's a rule that we haven't mentioned :
A JSX expression must have exactly one outermost element.
// This code is not valid
var paragraphs =
(
<p>I am a paragraph.</p>
<p>I, too, am a paragraph.</p>
);
// This code will work fine
var paragraphs =
(
<div id="i-am-the-outermost-element">
<p>I am a paragraph.</p>
<p>I, too, am a paragraph.</p>
</div>
);
23. What's a component?
A component is a small, reusable chunk of code that is responsible for one job. That job is often to
render some HTML.
The terms "component," "React component," and "component instance" all refer to the same thing.
24. React ecosystem
var React = require('react');
var ReactDOM = require('react-dom');
//or
import React from 'react‘;
import ReactDOM from 'react-dom';
ReactDOM.render( element, container, [callback] );
ReactDOM : several React-specific methods, all of which deal with the DOM in some way or another.
ReactDOM.render makes its first argument appear onscreen. But where on the screen should that first
argument appear? The first argument is appended to whatever element is selected by the second argument.
Returns a JavaScript object ( contains methods that you need in order to use React).
26. Component render in action
Take a look at the code below. This code will create and render a new React component:
import React from 'react‘;
import ReactDOM from 'react-dom';
let ProductElement = React.createClass(
{
render: function () {
return (
<div>
<h1>{product.id}</h1>
<img src={product.image.src} alt={product.image.alt} width={product.width} />
</div>
);
}});
ReactDOM.render( <ProductElement />, document.getElementById('app') );
//import library
// Component
// Render
27. React Component
Calling React.createClass is the way to make a new component class.
When you make a new component class, you should store it in a variable so that you can use it later.
On line 4, notice that our component class is stored in a variable named MyComponentClass.
Component class variable names must begin with capital letters!
This adheres to the naming convention in which class names are written in UpperCamelCase. There are
technical reasons for it as well.
29. Reactdom Render
let Product = (
<div>
<img src="pics/pk-004.jpg" />
<h1>
BLEU DE CHANEL
</h1>
<article>
<strong> EAU DE PARFUM VAPORISATEUR </strong> L’éloge de la liberté
masculine dans un aromatique-boisé au sillage captivant. Un parfum intemporel,
anticonformiste, contenu dans un flacon d'un bleu énigmatique. En savoir plus ,,,
</article>
</div>
);
ReactDOM.render(Product , document.getElementById('app') );
30. Updating the Rendered Element
React elements are immutable. Once you create an element, you can't change its children
or attributes. An element is like a single frame in a movie: it represents the UI at a certain
point in time.
With our knowledge so far, the only way to update the UI is to create a new element, and
pass it to ReactDOM.render().
32. The virtual dom
React Only Updates What's Necessary
One special thing about ReactDOM.render is that it only updates DOM elements that have changed.
That means that if you render the exact same thing twice in a row, the second render will do nothing:
var title = <h1> BLEU DE CHANEL </h1>;
// This will add " BLEU DE CHANEL " to the screen:
ReactDOM.render(title, document.getElementById('app'));
// This won't do anything at all:
ReactDOM.render(title, document.getElementById('app'));
React Diff Algorith
33. Granular dom updates
React DOM compares the element and its children to the previous one,
and only applies the DOM updates necessary to bring the DOM to the
desired state.
You can verify by inspecting the last example with the browser tools:
35. MultilineUseMultilineJSXina
Component
import React from 'react‘;
import ReactDOM from 'react-dom';
let QuoteMaker = React.createClass({
render: function () {
return (
<blockquote>
<p>
The world is full of objects, more or less interesting; I do not wish to add any more.
</p>
<cite>
<a target="_blank"
href="http://my-link.com">
Douglas Huebler
</a>
</cite>
</blockquote>
);
}
});
ReactDOM.render( <QuoteMaker />, document.getElementById('app'));
36. Variable Attributes
Take a look at this JavaScript object named product :
let product =
{
id: 56,
name: ‘BLEU DE CHANEL ‘,
image: {
src:’pics/pk-004.jpg’,
width : ‘200px’
}
};
37. Variable Attributes
Use a JavaScript variable attribute in a Component
let Product = React.createClass({
render: function () {
return (
<div>
<h1>{product.image.name}</h1>
<img
src={product.image.src}
alt={product.image,alt}
width={product.image.width} />
</div>
);
}
});
ReactDOM.render(< Product />, document.getElementById('app'));
38. Put Logic in a Render Function
A render function must have a return statement.
However, that isn't all that it can have. Can also be a fine place to put simple calculations that need to
happen right before a component renders.
let Random = React.createClass({
// This should be in the render function:
var n = Math.floor(Math.random()*10+1);
render: function () {
return <h1>The number is {n}!</h1>;
}
});
39. Put Logic in a Render Function
//import library here
var friends = [
{
title: "Yummmmmmm",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyweirdo.jpg"
},
{
title: "Hey Guys! Wait Up!",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-earnestfrog.jpg"
},
{
title: "Yikes",
src: "https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-alpaca.jpg"
}
];
JavaScriptobject
40. // New component class starts here:
let Friend = React.createClass({
render: function () {
var friend = friends[0];
return (
<div>
<h1>
{friend.title}
</h1>
<img src="{friend.src}"/>
</div>
);
}
});
ReactDOM.render(<Friend/>, document.getElementById('app'));
Put Logic in a Render Function
Component(Friend)
41. Conditional in a Render Function
//import library here !
let TodaysPlan = React.createClass({
render: function () {
var message;
var fiftyFifty = true;
if (!fiftyFifty) {
message = "out WOOO"
} else {
message = "to bed WOOO"
}
return <h1>Tonight I am going to {message}!</h1>;
}
});
ReactDOM.render(<TodaysPlan />, document.getElementById('app'));
42. Use this
The word this gets used in React a lot!
You are especially likely to see this inside of an object that is being passed to React.createClass.
let IceCreamGuy = React.createClass (
{
food: 'ice cream',
render: function () {
return <h1>I like {this.food}.</h1>;
}
}
);
43. Use this
In the code, what does this mean?
this refers to the instructions object being passed to React.createClass.
this has two properties: food, and render. this.food will evaluate to "ice cream."
There's nothing React-specific about this behaving in this way! However, in React you will see
this used in this way almost constantly.
If you aren't totally comfortable with this in JavaScript, here is a good resource.
44. Events Listener
Use an Event Listener in a Component !
Render functions often contain event listeners. Here's an example of an event listener
in a render function :
React.createClass({
myFunc: function () {
alert('Stop it. Stop hovering.');
},
render: function () {
return (
<div onHover={this.myFunc}> </div>;
);
}
});
Function
Event Listener
46. COMPONENTS INTERACTING
A React application can contain dozens, or even hundreds, of components.
Each component might be small and relatively unremarkable on its own. When combined, however,
they can form enormous, fantastically complex ecosystems of information.
In other words, React apps are made out of components, but what makes React special isn't
components themselves. What makes React special is the ways in which components interact.
This unit is an introduction to components interacting.
47. A Component in a Render Function
Here is a render function that returns an HTML-like JSX element:
You've seen render functions return <div></div>s, <p></p>s, and <h1></h1>s,
just like in the above example.
var Example = React.createClass({
render: function () {
return <h1>Hello world</h1>;
}
});
48. Composing Components
Render functions can also return another kind of JSX: [component instances]
In the above example, Crazy's render function returns an instance of the OMG component class. You
could say that Crazy renders an <OMG />.
let OMG = React.createClass({ render: function () { return <h1>Whooaa!</h1>; } });
let Crazy = React.createClass({ render: function () { return <OMG />; } });
49. Please use module.exports
Alright! You've learned how to use require to import a file into a different file.
But you don't want to import a whole file! NavBar.js isn't really what you're looking for. You just
want to the NavBar component class, so that you can render a <NavBar /> instance.
What you need is a way to import only a specific part of a file into another file.
The answer is something called module.exports. module.exports comes from Node.js's module
system, just like require does. module.exports and require are meant to be used together, and
you basically never see one without the other.
Here's how you use module.exports:
In one file, declare module.exports to be equal to an expression. It could be any expression you
want:
50. Example without (module.exports)
ProfilePage.js NavBar.js
var NavBar = require('./NavBar');
var ProfilePage = React.createClass({
render: function () {
return (
<div>
<NavBar />
<h1>All About Me!</h1>
<p>I like movies and blah blah blah blah blah</p>
<img src="https://s3.amazonaws.com/codecademy-
content/courses/React/react_photo-monkeyselfie.jpg" />
</div>
);
}
});
var NavBar = React.createClass({
render: function () {
var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about',
'contact'];
var navLinks = pages.map(function(page){
return (
<a href={'/' + page}>
{page}
</a>
);
});
return <nav>{navLinks}</nav>;
}
});
51. Example using (module.exports)
ProfilePage.js NavBar.js
var NavBar = require('./NavBar');
var ProfilePage = React.createClass({
render: function () {
return (
<div>
<NavBar />
<h1>All About Me!</h1>
<p>I like movies and blah blah blah blah blah</p>
<img src="https://s3.amazonaws.com/codecademy-
content/courses/React/react_photo-monkeyselfie.jpg" />
</div>
);
}
});
var NavBar = React.createClass({
render: function () {
var pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
var navLinks = pages.map(function(page){
return (
<a href={'/' + page}>
{page}
</a>
);
});
return <nav>{navLinks}</nav>;
}
});
module.exports = NavBar;
52. Use the component Attributs
Passing prop to componenet a render !
import React from 'react‘;
import ReactDOM from 'react-dom';
var Greeting = React.createClass({
render: function () {
return <h1>Hi there, {this.props.firstName}!
</h1>;
}
});
// ReactDOM.render goes here:
ReactDOM.render(
<Greeting firstName='Amine' />,
document.getElementById('app')
);
53. Attributs (convert attrs component to json)
var PropsDisplayer = React.createClass({
render: function () {
var stringProps = JSON.stringify(this.props);
return (
<div>
<h1>CHECK OUT MY PROPS OBJECT</h1>
<h2>{stringProps}</h2>
</div>
);
}
});
// ReactDOM.render goes here:
ReactDOM.render(<PropsDisplayer myProp="Hello" name="Frarthur" town="Flundon" age={2} haunted={false}/>, document.getElementById('app'))
{"myProp":"Hello","name":"Frarthur","town":"Flundon","age":2,"haunted":false}
54. Include element with passing props
import React from 'react‘;
import ReactDOM from 'react-dom';
var App = React.createClass({
render: function () {
return (
<div>
<h1>
<Greeting name={this.props.name} />
</h1>
<article>
Latest newzz: where is my phone?
</article>
</div>
);
}
});
ReactDOM.render(
<App name="aminem9" />,
document.getElementById('app')
);
import React from 'react‘;
var Greeting = React.createClass({
render: function () {
return <h1>Hi there, {this.props.name}!</h1>;
}
});
module.exports = Greeting;.
55. Default props value !
Impot ,,,
var Button = React.createClass({
???
render: function () {
return (
<button>
{this.props.text}
</button>
);
}
});
ReactDOM.render(
<Button text="" />,
document.getElementById('app')
);
getDefaultProps: function () {
return { text: 'I am a button' };
},
57. Dynamic information in React
There are two ways for a component to get dynamic information: props and state.
Besides props and state, everything in a component should always stay exactly the same.
You just spent a long lesson learning about props.
Now it's time to learn about state. props and state are all that you need to set up an ecosystem of
interacting React components.
58. The state
To read a component's state, use the expression this.state.name-of-property:
The above component class reads a property in its state from inside of its render function.
Just like this.props, you can use this.state from any property on the instructions object.
{this.state.myProperty}
59. getInitialState !
import React from 'react‘;
import ReactDOM from 'react-dom';
var App = React.createClass({
getInitialState: function () {
return { title: 'Best App' };
},
render: function () {
return (
<h1>{this.state.title}</h1>
);
}
});
ReactDOM.render(<App />,
document.getElementById('app')
)
60. A component can do more than just read its own state. A component can also change its own state.
A component changes its state by calling the function this.setState.
this.setState takes two arguments: an object that will update the component's state, and a callback. You
basically never need the callback.
In the code editor, take a look at Example.js. Notice that <Example /> has a state of:
61. var Example = React.createClass({
getInitialState: function () {
this.setState(
{
hungry: true
}
);
return {
mood: 'great',
hungry: false
};
},
render: function () {
return <div>{this.state.hungry}</div>;
}
});
<Example />
Set a state
62. Call this.setState from Another Function
import React from 'react‘;
import ReactDOM from 'react-dom';
var Mood = React.createClass({
getInitialState: function () {
return {
mood: 'good',
color: 'yellow'
};
},
changeColor: function () {
var newColor = this.state.color == 'yellow' ? 'green' : 'yellow';
this.setState({ color: newColor });
},
63. Call this.setState from Another Function
toggleMood: function () {
var newMood = this.state.mood == 'good' ? 'bad' : 'good';
this.setState({ mood: newMood });
},
render: function () {
return (
<div>
<h1>I'm feeling {this.state.mood}!</h1>
<button onClick={this.toggleMood}>
Click Me
</button>
</div>
);
}
});
ReactDOM.render(<Mood />, document.getElementById('app'));
64. Build a Stateful Component Class
import React from 'react‘;
import ReactDOM from 'react-dom';
var Header = React.createClass({
getInitialState: function() {
return {
imageSource: "mypicture.png"
};
},
changeImage: function() {
this.setState({imageSource: "differentpicture.png"});
},
render: function() {
return(
<img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />
);
}
});
module.exports = Header;
65. Build a Stateless Component Class
import React from 'react‘;
import ReactDOM from 'react-dom';
var Header = React.createClass({
render: function() {
return(
<img src={this.props.imageSource} />
);
}
});
ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);
66. property vs state react
https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
stateful component you can also change the state, using this.setState
stateful component you can also change the state, using this.setState
Somewhere in the application, you need to bind data, or remember things. Stateless components are dumb (and that is good), they cannot remember and they cannot give context to other parts of the UI. Stateful components provide the necessary context glue.
In the example above, you can see that during the render, imageSource is passed in as an attribute and is then added to the stateless components this.props object.