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().
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
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 (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.
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
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
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).
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
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 (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.
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
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
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).
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.
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.
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. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile application
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,
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/
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.
About
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Technical Specifications
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
Key Features
Indigenized remote control interface card suitable for MAFI system CCR equipment. Compatible for IDM8000 CCR. Backplane mounted serial and TCP/Ethernet communication module for CCR remote access. IDM 8000 CCR remote control on serial and TCP protocol.
• Remote control: Parallel or serial interface
• Compatible with MAFI CCR system
• Copatiable with IDM8000 CCR
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
Application
• Remote control: Parallel or serial interface.
• Compatible with MAFI CCR system.
• Compatible with IDM8000 CCR.
• Compatible with Backplane mount serial communication.
• Compatible with commercial and Defence aviation CCR system.
• Remote control system for accessing CCR and allied system over serial or TCP.
• Indigenized local Support/presence in India.
• Easy in configuration using DIP switches.
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Dr.Costas Sachpazis
Terzaghi's soil bearing capacity theory, developed by Karl Terzaghi, is a fundamental principle in geotechnical engineering used to determine the bearing capacity of shallow foundations. This theory provides a method to calculate the ultimate bearing capacity of soil, which is the maximum load per unit area that the soil can support without undergoing shear failure. The Calculation HTML Code included.
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
Overview of the fundamental roles in Hydropower generation and the components involved in wider Electrical Engineering.
This paper presents the design and construction of hydroelectric dams from the hydrologist’s survey of the valley before construction, all aspects and involved disciplines, fluid dynamics, structural engineering, generation and mains frequency regulation to the very transmission of power through the network in the United Kingdom.
Author: Robbie Edward Sayers
Collaborators and co editors: Charlie Sims and Connor Healey.
(C) 2024 Robbie E. Sayers
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.