react js doc code example
Example 1: reactjs install
npm install -g create-react-app -> install create react app tools
create-react-app app01 -> create your first projects app001
Example 2: what is react
This is a formatted version of Komadori's answer
(https://tinyurl.com/Komadori)
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 applications.
Example 3: react js documentation
//With node and npm already installed for basic start
npx create-react-app my-app-name
// if you want to use npm
npx create-react-app my-app-name --npm
//if you want to use typescript
npx create-react-app my-app-name --template typescript
yarn start // app will be hosted on localhost:3000
/* start making changes at ./my-app-name/src/App.js
React documentation: https://reactjs.org/docs/hello-world.html
*/
Example 4: react.js
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />
Example 5: react documentation
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />; }
}
Example 6: reactjs basic example
// -------// -------// -------
// index.js
// -------// -------// -------
const user = {
name: "zidane",
email: '[email protected]'
};
const element = <h1> {user.name} exist email: {user.email} </h1>;
const element2 =
<div className="heading">
<h1> {user.name} </h1>
<h1> {user.email} </h1>
</div>;
var numbers = [1,2,3,4];
var doubleNumbers = numbers.map(function(num){
return num * 2 + "; ";
})
var doubleNumberArrowFunction = numbers.map((num) => num * 3 + "; ");
var element3 =
<div>
Double numbers: {doubleNumberArrowFunction}
</div>;
ReactDOM.render(
element3,
// <React.StrictMode>
// <App />
// </React.StrictMode>,
document.getElementById('root')
);
// -------// -------// -------
// ------- index.css ------
// -------// -------// -------
.heading {
padding: 10px;
color: white;
background-color: green;
}