complete-intro-to-react-week-1.md

Yarn

Replaces npm for doing install.

npm install --save react

yarn add react

Npm install is not deterministic (If you install in difference way you have difference structure). Yarn its deterministic. Use it for apps and not for libraries.

Understanding React

We can do anything with no tools. Its a view library but it does more. It was build behind request response model.

My First component

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF8">
	<title>Frontend Masters React</title>
</head>
<body>
	<div id="app">React has not yet rendered</div>
	
	<script src="node_modules/react/dist/react.js"></script>
	<script src="node_modules/react-dom/dist/react-dom.js"></script>
	
	<script>
		var MyFirstComponent = Reqct.createClass({
			render: function() {
				return (
					React.DOM.div(null, 
						React.DOM.h1(null, 'This is my first component!')
					)
				);
			}
		});
		
		ReactDOM.render(React.createElement(MyFirstComponent), document.getElementById('app'))
	
	</script>
</body>
</html>

createClass vs createElement

Create element create one instance, and createClass create an instance every time we use it.

Second component

Component of components

var div = React.DOM.div
var h1 = React.Dom.h1

var MyTitle = React.createClass({
	render: function() {
		return (
			div(null,
				h1(null, 'check out this component')
			)
		)
	}
})

var MyFirstComponent = React.createClass({
	render: function() {
		return (
			div(null, 
				React.createElement(MyTitle),
				React.createElement(MyTitle),
				React.createElement(MyTitle),
				React.createElement(MyTitle)
			)
		)
	}
})
	
ReactDOM.render(React.createElement(MyFirstComponent), document.getElementById('app'))

Factories & Props

createFactory() Create a method to make a little bit nicer with we not use JSX.

var MyTitle = React.createClass({
	render: function() {
		return (
			div(null,
				h1(null, 'check out this component')
			)
		)
	}
})

var Factory = React.createFactory(MyTitle);

div(null,
	Factory()
);

Props

var MyTitle = React.createClass({
	render: function() {
		return (
			div(null,
				h1({ style: { color: this.props.color }}, this.props.title)
			)
		)
	}
})

var Factory = React.createFactory(MyTitle);

div(null,
	Factory({ title: 'props are the best', color: 'peru' }),
	Factory({ title: 'semicolons are the worst', color: 'mediumaquamarine' }),
	Factory({ title: 'yay aya aya', 'rebeccapurple' }),
	Factory({ title: 'read only property', 'darkvioletred' })
);

Webpack

Core: Takes modules and puts in one file. We have loader to make things with files.

HenriqueLimas/complete-intro-to-react-week-1.md

Select an option

No results found