REACT SOCIAL NETWORK

Project - training

Links

• Source code on GitHub

Content

• Install
• Explored
• Process

---

Install

Get started

	git clone https://github.com/luamoris/react-social-network
	cd react-social-network
	npm i
	npm start

For build

	npm run build

For eject

Note: this is a one-way operation. Once you eject, you can’t go back!

	npm run eject

For lint

• stylelint - lint SCSS files

	npm run stylelint

---

Explored

Content

• Style Modules
• Prop Types
• Browser Router

Style Modules

	/* App.module.css */

	.app {
		width: 100%;
		height: 100vh;
	}

	.content {
		margin: auto;
		width: 500px;
		height: 300px;
		background-color: #d64545;
	}

	/* App.jsx */

	import React from 'react';
	import style from 'App.module.css'

	/*
	* style.app: App_app__[hash:5]
	* style.content: App_content__[hash:5]
	*/

	const App = () => {
		return (
			<div className={style.app}>
				<div className={style.content}></div>
			</div>
		);
	};

	export default App;

Prop Types

	npm install prop-types

	import PropTypes from 'prop-types';

	const Item = (props) => {
		return (
			<div className="item">
				<a href={ props.link }>{ props.title }</a>
			</div>
		);
	};

	Item.propTypes = {
		link: PropTypes.string.isRequired,
		title: PropTypes.string.isRequired,
	};

	PropTypes = {
		string, 		// string
		number, 		// integer, float
		object, 		// object {}
		objectOf(),		// type of fields does the object have
		array, 			// array []
		arrayOf(), 		// type of fields does the array have

		isRequired,		// ???
	}

Browser Router

	npm install react-router-dom

	import { BrowserRouter, Route, NavLink } from 'react-router-dom';

	const Profile = () => ( <div className="profile"></div> );
	const About = () => ( <div className="about"></div> );

	const App = () => {
		return (
			<BrowserRouter>
				<div className="app">
					<div className="links">
						<NavLink to="/profile" activeClassName="active">Profile</NavLink>
						<NavLink to="/about" activeClassName="active">About</NavLink>
					</div>
					<div className="content">
						<Route path="/profile" component={Profile} />
						<Route path="/about" component={About} />
					</div>
				</div>
			</BrowserRouter>
		);
	};

---

Process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Flexbox, Grid
• Mobile-first workflow
• React - JS library

Author