Some basic concepts for a beginner react learner.
now I will introduce react, this article for a beginner who is knocking on the react door to learn to react.
1 How React Work>
React is a javascript library (not a framework)it creates a user interface easier and predictable .and programmer life makes it easier and flexible.
its very core concepts, react maintenance a tree for us. this tree has a lot of controls in Nodes.
we can imagine HTML code as a tree.that is how the browser treats our document object model(DOM). React support us to re-constructor our DOM in javascript show in the user interface(UI) only those changes to the DOM which have actually occurred.
2 React re-render>
we know that react is known for its performance. Because it has a virtual DOM and real DOM shows only which change actually happened.for this reason react is more popular than any other framework.
a re-render can only be triggered if a component’s state has changed. the state can change from a props change, or form a direct ‘setState’ change.
3 React Components>
React components are global (without private component)or independent.it can be used many times in other components. it like a function, we know if a function called from somewhere then the function returns something. react components also a function, when somewhere use a component, component return something.
4 Why this name is ‘React’>
React capture our reaction in coding or user input, which kind of input, that change something in the user interface(UI).react capture instantly and show in User Interface.need to update DOM, in react We don’t have to do manually.react will simply ‘react’ to the state changes and automatically update the DOM when needed.
5 React Private Route>
PrivateRoute component is the border for all private routes in the react application. f the user is logged in can access the private route. otherwise , redirect the application user sign-in page.
6 Expression in jsx>
JSX is an extension to the javascript language, and therefore it can accept any valid javascript valid expression placed inside the curly braces.
we can include a javascript expression using a pair of curly braces anywhere within JSX.
While JSX might look like a template language, it really isn’t. it’s just a javascript extension that allows us to represent react’s tree of object syntax that looks like an Html template.
7 What is props>
react has a different method to data flow & maintenance than other frameworks. and that’s why it can be difficult at the beginning to understand some concepts like props.
Props is a special keyword in react, which stands, or properties, and is being used to passing data from component to another component.
a component is like a function , when we called a function ,we passed a value by parameters props is like parameters.
8 functional components>
react has two kinds of components.functional components and class-based components.
a functional component is just a javascript function that accepts props as an argument and returns a react element.
we can use react hooks in only functional components.
9 Benefits of Components>
components are beautiful and react is based on components.we start with small things, which we use to build bigger things, which we use to build bigger things, which we build use to build apps. each component has its own logic and controls its own rendering , and can be reused wherever you need them.
10 React Hooks>
A hook in react component is known as a special function. all hook functions starting with ‘use’some of them can be used to provide a function component with stateful element.react hook functions can only be used in the function component use them in class components.