Forem: Diomedes Lajara

State Rules!

Diomedes Lajara — Tue, 08 Jan 2019 22:46:35 +0000

Rules of state

Do not confuse props with state
‘State’ is a JS object
Only usable with class based components
State has to be initialized when a component is created
Never update state directly.
State can only be updated with setState.
Updating State causes the component to re-render.

State object is defined inside the constructor function.
Use states (this.state) to manage dynamic data.

Constructor note
The base class of React.Component has its own constructor and by defining a new constructor, it gets overridden. But to make sure that the “parent” constructor gets called we use super(props). Super with props is a reference to the parent constructor inside React.Component function.

React Classes vs Funcomps

Diomedes Lajara — Sat, 29 Dec 2018 01:56:59 +0000

https://thepracticaldev.s3.amazonaws.com/i/6q6a5bxfcd67920xaru6.png

To write a Functional or to write a Class based component.

One way to decide whether a component will be a class or functional component is to think of what will go inside the component. If it as a simple component that returns some jsx with props and no logic. This is a Functional component that will only render things to the DOM, others call it a dummy component.

Class based component are easier to organize
Can use State object to make changes and interactions based on the user inputsThese components also handle and understands lifecycle events. Lifecycles are stages of an application. For example loading screens.

Rules for Class components
Must be a javascript class
Must externt (subclass) React.Component
Must define a ‘render’ method that returns some jsx

justnotes written around this date

Propping components

Diomedes Lajara — Sat, 22 Dec 2018 16:59:27 +0000

The most important thing is to pass data from parent component to children components using props. Also to customize how a component interacts/behaves or the looks/style of it.

The content inside a component’s tags can be called using props.children. This is used to place anything from text to jsx or even another component, which makes it a child component from another file.

Three parts of a Component
Nesting: comp inside another comp
Create a new component but only import one react library and instead of rendering the component, export it using default followed by the name of the component.

Reusability: flexibility for multiple uses. few/simple components as possible
Do not forget to import the component at the top of the main index.js file and also calling the component using tags

Configuration: props is used to configure a component
Use props as the first argument/parameter? Of the component function. Using dot notation to invoke the prop like an object call.
The prop goes after the component name like passing style or className as if it was and HTML/JSX tag.

https://thepracticaldev.s3.amazonaws.com/i/spgxnfggv3sh8xlfyrjt.png

...justnotes

HTML and JS had a baby named JSX.

Diomedes Lajara — Wed, 19 Dec 2018 04:18:23 +0000

First I opened up the terminal, ran npm to type "create-react-app jsx"
on the project then proceeded to delete everything inside the SRC folder and created index.js. Added a few comments to guide me using double backslash (//). Inserted React and ReactDOM imports. Followed by creating a Conts App for the newly created Component. Finally threw in a render method with ReactDOM and grabbing the root ID from the index.html using querySelector.

With this mixture of JSX elements inside the functional component and NPM start in the terminal, I ended up seeing my first component in the screen. “Live with React”