React_Tutorial
in the tutorial you learn the besics of reactjs and How to create the besic app in the react..Happy Coding!
Why use the reactjs ?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. We'll get to the funny XML-like tags in a second. Your components tell React what you want to render – then React will efficiently update and render just the right components when your data changes.
How to Install and Create the react app.
- For intalling the react in you machine
- open the CMD and type the command
npm install -g create-react-app
-gwe can use our react app globally that is why we are using -g .- After installation the
reactjsthen for creating the reactjs app type on the cmd.create-react-app my-app - here my-app is the name of the application
- make shure you should already installed npm or nodejs
Running and creating the server for the app
By writting the code with
extension.js
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
*/
//import App from './App';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
class TodoList extends React.Component {
constructor(){
super();
this.state = {
firstname: 'Hello React!!'
}
}
render(){
return (
<ul>
{this.state.firstname}
</ul>
)
}
}
ReactDOM.render(<TodoList/>, document.getElementById('root'));- for running the server open
cmdand type npm start
Some Important Terms in the reactjs
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
class TodoList extends React.Component {
constructor(){
super();
this.state = {
firstname: 'Hello React!!'
}
}
render(){
return (
<ul>
{this.state.firstname}
</ul>
)
}
}
ReactDOM.render(<TodoList/>, document.getElementById('root'));
👍 props
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" />